import React, { useState, useEffect } from 'react';
import { Divider, Spin } from 'antd';
import { AIForecast } from '../../../components/index';
import { TRDefault } from '@/components/index.js';
import { ForecastAndSimulateEcharts } from '../../../components/Charts/index.js';
import { ExplainTitle, InstructionText, RadioGroup } from '../../../components';
import type {
  IPostQueryForecastAndSimulateParamsType,
  IFormValue,
  IForecastAndSimulateDataType,
} from '../../../type';
import { ITitleType, IStoreType } from '../../../type';
import { titleMap, storeOptions } from '../../../dictionary';
import { iconAiBlue, iconUser, iconAiGre } from '@/assets/icon/index.js';
import styles from './index.less';
import { TjIcon } from '@/tjComponents';

interface IProps {
  /**
   * menuCode
   */
  menuCode?: string;
  /**
   * 请求数据
   */
  formValue?: IFormValue;
  /**
   * lodaing
   */
  loading?: boolean;
  /**
   * 权限
   */
  buttonPermissions?: any;
  /**
   * 禁用保存按钮
   */
  saveButtonDisabled?: boolean;
  /**
   * error
   */
  error?: boolean;
  /**
   * 是否抓取数据失败
   */
  isFail?: boolean;
  /**
   * 数据
   */
  data?: IForecastAndSimulateDataType[];
  /**
   * 请求参数
   */
  forecastAndSimulateParams?: IPostQueryForecastAndSimulateParamsType;
  /**
   * 请求数据
   */
  onSearch?: (
    params: IPostQueryForecastAndSimulateParamsType,
    queryfindStrategyPriceForecastParams?: any,
    isUserFetchData?: boolean,
  ) => void;
  /**
   * AI策略默认信参数
   */
  aiStrategyData?: any;
}

const ForecastAndSimulate = (props: IProps) => {
  const {
    menuCode,
    saveButtonDisabled,
    buttonPermissions,
    forecastAndSimulateParams,
    loading,
    error,
    isFail,
    data = [],
    formValue,
    aiStrategyData,
    onSearch,
  } = props;
  const [queryParams, setQueryParams] = useState<IPostQueryForecastAndSimulateParamsType>({});
  const { store = IStoreType.NO_CONSIDER } = queryParams;
  const [visible, setVisible] = useState<boolean>(false);
  const [aiOrUser, setAiOrUser] = useState<string>('ai');

  // AI策略
  const _openAIForecast = (params: string) => {
    /* if (provinceOptions.length > 0) {
      setVisible(true);
      } */
    setAiOrUser(params);
    setVisible(true);
  };

  // 人工策略
  const _openUserForecast = (params: string) => {
    setAiOrUser(params);
    setVisible(true);
  };

  // 关闭
  const onClose = () => {
    setVisible(false);
  };

  useEffect(() => {
    if (forecastAndSimulateParams) {
      setQueryParams(forecastAndSimulateParams);
    }
  }, [forecastAndSimulateParams]);

  const _onChangeStore = (e: IStoreType) => {
    const _forecastAndSimulateParams: IPostQueryForecastAndSimulateParamsType = {
      ...forecastAndSimulateParams,
      store: e,
    };
    setQueryParams(_forecastAndSimulateParams);
    onSearch && onSearch(_forecastAndSimulateParams, undefined, true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.left}>
          <div className={styles.explainTitle}>
            <ExplainTitle
              title={titleMap[ITitleType.POWER_PREDICTION_AND_ADJUSTMENT_SIMULATION].title}
            />
          </div>
          <div className={styles.instructionText}>
            <InstructionText
              text={titleMap[ITitleType.POWER_PREDICTION_AND_ADJUSTMENT_SIMULATION].instructionText}
            />
          </div>
        </div>
        <div className={styles.right}>
          <div className={styles.store}>
            <div className={styles.storeTitle}>
              <span className={styles.storeText} onClick={() => _openAIForecast('ai')}>
                {/* <img src={iconAiBlue} className={styles.aiForecastLogo} alt="AI" /> */}
                <TjIcon dark={iconAiBlue} gre={iconAiGre} className={styles.aiForecastLogo} />
                AI策略
              </span>
              {/* <Divider type="vertical" />
              <span className={styles.storeText} onClick={() => _openUserForecast('user')}>
                <img src={iconUser} className={styles.aiForecastLogo} />
                人工策略
              </span> */}
            </div>
            <RadioGroup
              value={store}
              defaultValue={IStoreType.NO_CONSIDER}
              options={storeOptions}
              onChange={_onChangeStore}
            />
          </div>
        </div>
      </div>
      <div className={styles.content}>
        {loading ? (
          <Spin />
        ) : isFail ? (
          <TRDefault type={'emptysm'} message={'暂无数据'} />
        ) : error ? (
          <TRDefault type={'emptysm'} message={'系统异常'} />
        ) : data ? (
          <div className={styles.charts}>
            <ForecastAndSimulateEcharts data={data} date={formValue?.calendarDate} />
          </div>
        ) : (
          <TRDefault type={'emptysm'} message={'暂无数据'} />
        )}
      </div>
      <AIForecast
        menuCode={menuCode}
        buttonPermissions={buttonPermissions}
        saveButtonDisabled={saveButtonDisabled}
        visible={visible}
        onClose={onClose}
        onSearch={onSearch}
        queryParams={queryParams}
        formValue={formValue}
        aiStrategyData={aiStrategyData}
        aiOrUser={aiOrUser}
        data={data}
      />
    </div>
  );
};

export default ForecastAndSimulate;
